<template>
  <div class="strut-div">
    <div :id="config.option.id" class="strut-div"></div>
  </div>
</template>

<script>
  import echarts from 'echarts';
	import autoHover from '../../util/autoHover.js';
  export default {
    name: "CommonTpillarChart",
    props: ['config'],
    data() {
      return {
        chart: null,
				timeTicket:null,
      }
    },
    methods: {
      initChart() {
        let option = {
          title: {
            text: this.config.option.title,
            left: 150,
            textStyle: {
              fontSize: 14,
              // fontWeight: 500,
              color: '#3FECFF'
            },
            top: 10
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
              type: false // 默认为直线，可选为：'line' | 'shadow'
            },
            formatter: function (params) {
              let time = '';
              let str = '';
              for (let i of params) {
                time = i.name.replace(/\n/g, '') + '<br/>';
                if (i.data == 'null' || i.data == null) {
                  str += i.seriesName + '：无数据' + '<br/>'
                } else {
                  str += i.seriesName + '：' + Math.abs(i.data) + '<br/>'
                }
              }
              return time + str;
            },
          },
          legend: {
            top: 30,
            right:10,
            itemGap: 20,
            itemWidth: 20,
            itemHeight: 10,
            textStyle: {
              color: '#fff'
            },
            data: this.config.option.legend
          },
          color: this.config.option.color,
          grid: {
            bottom: '3%',
            left: '5%',
            right: '0',
            x: 5,
            x2: 5,
            y2: 50,
            containLabel: true
          },
          xAxis: {
            show: false
          },
          yAxis: [{
            type: 'category',
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: true,
              interval: '0',
              textStyle: {
                fontSize: 12,
                color: '#E9F4FF',
              },
            },
						axisPointer: {
						  type: 'shadow'
						},
            data: this.config.option.yAxis
          }],
          series: [{
            name: this.config.option.legend[0],
            type: 'bar',
            barWidth: this.config.option.barWidth || 12,
            stack: '总量',
            label: {
              normal: {
                show: true,
                position: ['20%', '0%'],
                color: '#E9F4FF',
                fontSize: '10',
                formatter: function (params) {
                  return params.data * -1;
                }
              },

            },
            data: this.config.option.xAxis[0]
          },
            {
              name: this.config.option.legend[1],
              type: 'bar',
              barWidth: this.config.option.barWidth || 12,
              stack: '总量',
              label: {
                normal: {
                  show: true,
                  position: ['35%', '0%'],
                  color: '#E9F4FF',
                  fontSize: '10',
                }
              },
              data: this.config.option.xAxis[1]
            },
          ]
        }
        console.log(this.chart);
        setTimeout(() => {
          this.chart.setOption(option);
					this.timeTicket = autoHover.autoHover(this.chart,option,option.yAxis[0].data.length);
        }, 300);

      }
    },
    mounted() {
      this.chart = echarts.init(document.getElementById(this.config.option.id));
    },
		beforeDestroy() {
			autoHover.stopHover(this.timeTicket);
		}
  }
</script>

<style scoped lang="scss" type="text/scss">

</style>
